<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>基础配置综合管理系统</title>
<link th:href="@{/css/manage/_common.css}" rel="stylesheet" type="text/css" />
<link th:href="@{/css/manage/login.css}" rel="stylesheet" type="text/css" />
<link rel="stylesheet" th:href="@{/css/manage/iconfont.css}">
<link th:href="@{/js/lib/swiper/css/swiper.min.css}" rel="stylesheet">
    <style>
        .swiper-container {
            position: relative;
            height: 87vh;
            width: 100%;
        }

        .qt-contWrap{
            position: absolute;
            z-index: 333;
            top: 50%;
            width: 100%;
        }

        .swiper-slide img {
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="qt-login-wrap">
        <div class="qt-login-header">
            <div class="qt-login-headerWrap fn-clear">
                <div class="qt-loginImg">
                    基础综合管理系统
                </div>
                <ul>
                    <li>首页</li>
                    <li>帮助</li>
                    <li>联系我们</li>
                </ul>
            </div>
        </div>
        <div class="qt-login-main">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img th:src="@{/img/login/index-back.jpg}"></div>
                    <div class="swiper-slide"><img th:src="@{/img/login/login-backg.png}"></div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
            <div class="qt-contWrap">
                <div class="qt-cont fn-clear">
                <form id="sysLogin">
                    <div class="qt-login-right">
                        <div class="qt-blueLine">
                        </div>
                        <div class="qt-rContitle fn-clear">
                            <span class="qt-userLogin active">登录</span>
                        </div>
                        <ul class="qt-login-ul">
                            <li class="qt-username">
                            <i class="iconfont icon-renbudaiwaiquan"></i>
                                <input type="text" name="userName"  class="oper-handle require" placeholder="请输入用户名">
                            </li>
                            <li class="qt-password">
                            <i class="iconfont icon-mima1"></i>
                                <input type="password" name="password" class="validate require"  placeholder="请输入您的密码">
                            </li>
                            <li class="qt-verifi">
                                <div class="ai-validate">
                                    <i class="iconfont icon-yanzhengma3"></i>
                                    <input type="text" name="kaptchaCode" class="validate require iconfont icon-yanzhengma3" placeholder="请输入验证码">
                                </div>
                                <span ><img  style="width: 100%;height: 100%;" alt="验证码" th:src="@{/kaptcha}" title="点击更换"
                    id="img_captcha" onclick="javascript:refreshCaptcha();">(看不清<a href="javascript:void(0)" onclick="javascript:refreshCaptcha()">换一张</a>)</span></li>
                        </ul>
                      <span class="qt-loginbtn" id="loginbtn">登录</span>
                    </div>
                     </form>
                </div>
            </div>
            <div class="qt-login-fonter">
                <p>Copyright © 2019 All Rights Reserved　版权所有 思维空间</p>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.8.1/jquery.min.js"></script>
    <script type="text/javascript" th:src="@{/js/lib/jquery/jquery.form.js}"></script>
    <script type="text/javascript" th:src="@{/js/lib/swiper/js/swiper.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/lib/jquery/jquery.setUI.js}"></script>
    <script type="text/javascript" th:src="@{/js/lib/zTree_v3/js/jquery.ztree.all.min.js}"></script>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/handlebars.js/2.0.0-alpha.4/handlebars.min.js"></script>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/layer/2.1/layer.js"></script>
    <script type="text/javascript" th:src="@{/js/lib/My97DatePicker/WdatePicker.js}"></script>
    <script type="text/javascript" th:src="@{/js/lib/jquery/jquery.nicescroll.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/lib/backstretch/jquery.backstretch.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/lib/ueditor1/ueditor.config.js}"></script>
    <script type="text/javascript" th:src="@{/js/lib/ueditor1/ueditor.all.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/validate.js}"></script>
    <script type="text/javascript" th:src="@{/js/BASE.js}"></script>
	<script type="text/javascript">
	$(function(){
        var swiper = new Swiper('.swiper-container', {
            spaceBetween: 30,
            centeredSlides: true,
            autoplay: {
                delay: 2500,
                disableOnInteraction: false,
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            }
        });
	    $(".qt-login-main").backstretch(["/img/login/login-backg.png"]);
		$("#sysLogin").on('click',"#loginbtn",function(){
			//表单校验
			var isTemp = $("#sysLogin").validateForm({
				msgPosition : 'right'
			});
			if (isTemp) {
				var my = {
						form : "sysLogin",
						url : "/sysLogin",
						callback : function(res) {
							layer.msg(res.message,{time:1000},function(){
								if(res.code == '1'){
									window.open(window.location.origin+"/sysIndex","_self");
								}else {
                                    refreshCaptcha()
                                }
							});
						}
					};
				$._FormRequest(my);
			}
		});
	});
	
	function refreshCaptcha(){  
		  document.getElementById("img_captcha").src="/kaptcha?t=" + Math.random();
	}
	</script>
</body>
</html>